<template>
	<div class="drag-container">
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">拖动指令 v-drag</div>
			<el-button size="default" type="primary" class="mb-4"> v-drag="[dragDom,dragHeader]" </el-button>
            <el-button size="default" type="primary" class="mb-4" @click="dragVisible = !dragVisible"> 显示拖动元素 </el-button>
			<el-alert title="v-drag指令 dragDom:要拖动的元素，dragHeader:要拖动的Header元素，document.querySelector 寻找元素"></el-alert>
		</el-card>
		<el-card v-if="dragVisible" class="mb-4 drag-container" v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']" shadow="never">
			<div class="el-dialog !w-[300px]">
				<header class="el-dialog__header">
					<span class="el-dialog__title">拖动元素</span>
				</header>
				<div class="el-dialog__body"></div>
				<footer class="el-dialog__footer">
					<div class="dialog-footer">
						<button class="el-button el-button--default" type="button">
							<span class="">取消</span></button
						><button class="el-button el-button--primary el-button--default" type="button">
							<span class=""> 确认 </span>
						</button>
					</div>
				</footer>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="directiveDrag">
import { ref } from 'vue';

const dragVisible = ref(false);
</script>

<style scoped lang="scss"></style>
